<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OL</title>
    <link rel="stylesheet" href="lib/ol.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <script src="lib/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var vectorSource = new ol.source.Vector({
        url: 'points.geojson',
        format: new ol.format.GeoJSON()
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: 'rgba(255, 0, 0, 0.5)'
                })
            })
        })
    });
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://localhost:8081/amap256/{z}/{x}/{y}.png'
                })
            }),
            vectorLayer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([107.11040599933166, 34.26271532332011]),
            zoom: 4
        })
    });
</script>
</body>
</html>